<template>
  <p>eat: {{ obj.hobby.eat }}</p>
  <button @click="obj.hobby = {}">update eat</button>
</template>

<script>
import { watch, ref, reactive, isReactive } from 'vue'
export default {
  setup() {
    const obj = reactive({
      hobby: {
        eat: '西瓜',
      },
    })
    // A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.
    // watch(obj.hobby.eat, () => {})
    // 想监听简单数据类型
    /* watch(
      () => obj.hobby.eat,
      (newValue, oldValue) => {
        console.log(newValue, oldValue)
      }
    ) */

    // 假如对 obj.hobby 自身的修改，能不能被监听到？【不能】
    /* watch(obj.hobby, () => {
      console.log('监听到了')
    }) */

    // 如果下面这样写，对 obj.hobby 的修改一定能被监听到
    // watch(obj, () => {})

    // 有可能我的对象很大，为了监听到 obj.hobby 我并不想采用上面的做法，因为性能不好
    // 那么如何做到对 obj.hobby 的修改也能被监听到呢？

    // 把 obj.hobby 当做普通值监听，【只有对 obj.hobby 自身的修改能被监听到】
    /* watch(
      () => obj.hobby,
      () => {
        console.log('监听到了')
      }
    ) */
    // 我希望不但对 obj.hobby 的修改能被监听到，也希望对内部数据的修改也被监听到
    // 在上面写法的基础上加 deep: true
    watch(
      () => obj.hobby,
      () => {
        console.log('监听到了')
      },
      {
        deep: true,
      }
    )
    return { obj }
  },
}
</script>
